<template>
    <a-spin :loading="loading" style="width: 100%">
        <a-card
            class="general-card"
            :header-style="{ paddingBottom: 20 }"
            :body-style="{
                paddingTop: '10px',
            }"
            :title="'近期新增恶意域名与IP数量'"
        >
            <div ref="chartRef" style="height: 289px;"></div>
        </a-card>
    </a-spin>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 生成从昨天往前的 7 天日期数组
const getLastSevenDays = () => {
    const dates = [];
    const today = new Date();
    for (let i = 1; i <= 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        dates.unshift(`${year}-${month}-${day}`);
    }
    return dates;
};

const xAxis = getLastSevenDays();
const domainData = [223465, 208270, 300697, 314821, 312396, 137237, 261627]; // 恶意域名数据
const ipData = [12345, 15678, 14321, 18765, 16543, 19876, 17654]; // 恶意IP数据

const chartRef = ref(null);
const loading = ref(false);

onMounted(() => {
    const chart = echarts.init(chartRef.value);

    const option = {
        grid: {
            left: '5%',
            right: '10%', // 为右侧Y轴留出空间
            top: '10',
            bottom: '30'
        },
        xAxis: {
            type: 'category',
            offset: 2,
            data: xAxis,
            boundaryGap: false,
            axisLabel: {
                color: '#ABABAC',
                formatter(value, idx) {
                    if (idx === 0) return '';
                    if (idx === xAxis.length - 1) return '';
                    return `${value}`;
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                interval: (idx) => {
                    if (idx === 0) return false;
                    if (idx === xAxis.length - 1) return false;
                    return true;
                },
                lineStyle: {
                    color: '#E5E8EF'
                }
            },
            axisPointer: {
                show: true,
                lineStyle: {
                    color: '#23ADFF',
                    width: 2
                }
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '恶意域名',
                nameTextStyle: {
                    color: '#ABABAC'
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: '#ABABAC', 
                    formatter(value) {
                        return (value / 10000).toFixed(2) + '万';
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#E5E8EF'
                    }
                }
            },
            {
                type: 'value',
                name: '恶意IP',
                nameTextStyle: {
                    color: '#ABABAC'
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: '#ABABAC', 
                    formatter(value) {
                        return (value / 1000).toFixed(1) + '千';
                    }
                },
                splitLine: {
                    show: false
                }
            }
        ],
        tooltip: {
            trigger: 'axis',
            formatter(params) {
                let result = `<div class="tooltip-title">${params[0].axisValueLabel}</div>`;
                params.forEach(item => {
                    const value = item.seriesName === '恶意域名' 
                        ? Number(item.value).toLocaleString() 
                        : Number(item.value).toLocaleString();
                    result += `<div class="content-panel">
                        <span class="tooltip-label" style="color: ${item.color}">● ${item.seriesName}</span>
                        <span class="tooltip-value">${value}</span>
                    </div>`;
                });
                return result;
            },
            className: 'echarts-tooltip-diy'
        },
        legend: {
            data: ['恶意域名', '恶意IP'],
            right: '5%',
            top: '2%',
            textStyle: {
                color: '#ABABAC'
            }
        },
        series: [
            {
                name: '恶意域名',
                data: domainData,
                type: 'line',
                smooth: true,
                symbolSize: 12,
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderWidth: 2
                    }
                },
                lineStyle: {
                    width: 3,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(30, 231, 255, 1)'
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(36, 154, 255, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(111, 66, 251, 1)'
                        }
                    ])
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(17, 126, 255, 0.16)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(17, 128, 255, 0)'
                        }
                    ])
                },
                yAxisIndex: 0
            },
            {
                name: '恶意IP',
                data: ipData,
                type: 'line',
                smooth: true,
                symbolSize: 12,
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderWidth: 2
                    }
                },
                lineStyle: {
                    width: 3,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(255, 230, 30, 1)'
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(255, 164, 36, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(251, 66, 66, 1)'
                        }
                    ])
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(255, 128, 17, 0.16)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 128, 17, 0)'
                        }
                    ])
                },
                yAxisIndex: 1
            }
        ]
    };

    chart.setOption(option);
});
</script>

<style scoped>
.general-card {
    padding: 20px;
    border: none;
    border-radius: 0;
    margin-top: 10px;
    background: rgb(var(--gray-111));
}
.general-card::v-deep .arco-card-header-title {
    color: #ABABAC;
}

/* 自定义提示框样式 */
.echarts-tooltip-diy {
    padding: 10px 15px;
    background-color: rgba(17, 25, 40, 0.85);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    max-width: 300px;
}
.tooltip-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.content-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 13px;
}
.tooltip-label {
    display: flex;
    align-items: center;
}
.tooltip-value {
    font-weight: 600;
}
</style>